<template>
  <!-- 系统设备 -->
  <div class="components-system-device">
    <title-bar
      :title="$t('dataAnalysis.sysEqui')"
      :tips-content="$t('dataAnalysis.iosTips') + $t('dataAnalysis.androidTips')"
    />
    <div class="chart-list">
      <div class="chart-item">
        <div
          id="android"
          style="width: 100%; height: 305px; margin: auto; display:inline-block"
        />
        <div class="chart-text">
          <p>{{ $t("home.Percentage") }}:{{ sysData[0] ? ((sysData[0] / sum)*100).toFixed(2) : 0 + '%' }}</p>
          <p>{{ $t("dataAnalysis.peopleNum") }}:{{ sysData[0] }}</p>
        </div>
      </div>

      <div class="chart-item">
        <div
          id="wxChat"
          style="width: 100%; height: 305px; margin: auto; display:inline-block"
        />
        <div class="chart-text">
          <p>{{ $t("home.Percentage") }}:{{ sysData[1] ? ((sysData[1] / sum)*100).toFixed(2) : 0 + '%' }}</p>
          <p>{{ $t("dataAnalysis.peopleNum") }}:{{ sysData[1] }}</p>
        </div>
      </div>

      <div class="chart-item">
        <div
          id="h5"
          style="width: 100%; height: 305px; margin: auto; display:inline-block"
        />
        <div class="chart-text">
          <p>{{ $t("home.Percentage") }}:{{ sysData[2] ? ((sysData[2] / sum)*100).toFixed(2) : 0 + '%' }}</p>
          <p>{{ $t("dataAnalysis.peopleNum") }}:{{ sysData[2] }}</p>
        </div>
      </div>

      <div class="chart-item">
        <div
          id="ios"
          style="width: 100%; height: 305px; margin: auto; display:inline-block"
        />
        <div class="chart-text">
          <p>{{ $t("home.Percentage") }}:{{ sysData[3] ? ((sysData[3] / sum)*100).toFixed(2) : 0 + '%' }}</p>
          <p>{{ $t("dataAnalysis.peopleNum") }}:{{ sysData[3] }}</p>
        </div>
      </div>

      <div class="chart-item">
        <div
          id="pc"
          style="width: 100%; height: 305px; margin: auto; display:inline-block"
        />
        <div class="chart-text">
          <p>{{ $t("home.Percentage") }}:{{ sysData[4] ? ((sysData[4] / sum)*100).toFixed(2) : 0 + '%' }}</p>
          <p>{{ $t("dataAnalysis.peopleNum") }}:{{ sysData[4] }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import titleBar from './title-bar.vue'
import * as $echarts from 'echarts'

const props = defineProps({
  equiData: {
    type: Object,
    default: () => ({
      xData: [],
      seriesData: []
    })
  },
  sysData: {
    type: Array,
    default: () => ([0, 0, 0, 0, 0])
  }
})
watch(() => props.equiData, () => {
  getEquiEchart('android', 0)
  getEquiEchart('wxChat', 1)
  getEquiEchart('h5', 2)
  getEquiEchart('ios', 3)
  getEquiEchart('pc', 4)
}, { deep: true })

// 系统用户合计
const sum = computed(() => {
  return props.sysData.reduce((a, b) => {
    return parseInt(a) + parseInt(b)
  }, 0)
})

// 获取系统设备左边的数据图
const getEquiEchart = (type, index) => {
  const other = sum.value - props.equiData.seriesData[index]?.value
  // 有的话就获取已有echarts实例的DOM节点
  let myChart = $echarts.getInstanceByDom(document.getElementById(type))
  // 如果不存在，就进行初始化
  if (myChart == null) {
    myChart = $echarts.init(document.getElementById(type))
  }
  const option = {
    tooltip: {
      trigger: 'item',
      show: true,
      formatter: `{b} <br/>{a}: {c} <br/>${$t('home.Percentage')}:{d}%`,
      position: [0, '70%']
    },
    graphic: {
      type: 'circle',
      left: 'center',
      top: 'center',
      style: {
        text: ['Android', $t('sysManagement.miniProgramSmall'), 'H5', 'IOS', 'PC'][index],
        textAlign: 'center',
        fill: 'rgb(51,51,51)',
        width: 30,
        height: 30,
        font: '14px blod Microsoft YaHei'
      }
    },
    series: [
      {
        name: $t('dataAnalysis.peopleNum'),
        type: 'pie',
        hoverAnimation: false,
        radius: ['70%', '30%'],
        center: ['50%', '50%'],
        color: [['#1890FF', '#FE5500', '#5FCFFF', '#574EFF', '#F6C023'][index], '#F1F5F9'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        itemStyle: {
          // 设置扇形的阴影
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowOffsetY: 2,
          shadowColor: 'rgba(22, 62, 101, 0.1)'
        },
        emphasis: {
          label: {
            show: false,
            fontSize: '14',
            color: '#888'
          }
        },
        labelLine: {
          show: false
        },
        data: [props.equiData.seriesData[index], { value: other, name: $t('prodList.other') }]
      }

    ]
  }
  myChart.setOption(option)
  window.addEventListener('resize', function () {
    myChart.resize()
  })
}

</script>

<style lang="scss" scoped>
.components-system-device{
  .chart-list {
    width: 100%;
    display: flex;
    .chart-item {
      width: 18%;
      margin-right: 2%;
      .chart-text{
        text-align: center;
        margin-bottom: 57px;
        p {
          margin-bottom: 5px;
          margin-top: 0;
        }
      }
    }
  }
}
</style>
